<template>
    <div class="apiCacheContainer">
        <div class="searchContainer">
            <UserSearch />
        </div>
        <div class="insertContainer">
            <el-button type="primary" plain size="small" icon="PlusOutlined" @click="addUserInfo()">添 加</el-button>
        </div>
        <div>
            <el-table
                :data="userDataList.dataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
            >
                <el-table-column prop="userAccount" label="用户账号" />
                <el-table-column prop="userNickName" label="用户昵称" />
                <el-table-column prop="userPhone" label="号码" />
                <el-table-column prop="userEmail" label="邮箱" />
                <el-table-column prop="giteePath" label="gitee主页" />
                <el-table-column prop="githubPath" label="github主页" />
                <el-table-column prop="qqNum" label="QQ" />
                <el-table-column prop="wechatNum" label="微信" />
                <el-table-column align="center" width="300">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">修 改</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
                        <el-button type="primary" size="small" @click="handleCopy(scope.$index, scope.row)">复 制</el-button>
                        <el-button type="warning" size="small" @click="handleAuthorisation(scope.$index, scope.row)">授 权</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                v-model:current-page="userDataList.pageIndex"
                v-model:page-size="userDataList.pageSize"
                :small="false"
                :background="true"
                layout="prev, pager, next, jumper, sizes, total"
                :total="userDataList.recordCount"
                @change="changePage"
                :page-sizes="[10, 20, 30, 50, 100, 200, 400]"
                style="float: right"
            />
        </div>

        <div>
            <UserAddOrUpdateDialog :userDataForm="userDataForm" :title="title"/>
        </div>

        <div>
            <UserDeleteDialog :userDataForm="userDataForm"/>
        </div>

        <div>
            <UserRoleAuthorisationDialog :userRoleAuthorisation="userRoleAuthorisation"/>
        </div>
    </div>
</template>

<script setup name="User" lang="ts">
import {createTag} from "@/utils/ywuCommon";
import UserSearch from '@/components/userRoleManage/userManage/UserSearch.vue'
import UserAddOrUpdateDialog from "@/components/userRoleManage/userManage/UserAddOrUpdateDialog.vue";
import UserDeleteDialog from "@/components/userRoleManage/userManage/UserDeleteDialog.vue";
import UserRoleAuthorisationDialog from "@/components/userRoleManage/userManage/UserRoleAuthorisationDialog.vue";
import {userInfoQuery} from "@/request/user";
import {computed, ref} from "vue";
import {useUserInfoStore} from "@/stores/userInfo/userInfo";
import {useRoute} from "vue-router";

let userDataForm = ref({
    id: '',
    userAccount: '',
    userNickName: '',
    userPhone: '',
    userEmail: '',
    userPassword: '',
    qqNum: '',
    wechatNum: '',
    githubPath: '',
    giteePath: ''
});
let title = ref("");
let userRoleAuthorisation = ref({});

let userDataList = computed(() => {return useUserInfoStore().userDataList});
let userSearchData = computed(() => {return useUserInfoStore().userSearchData});

// 查询用户信息列表
userInfoQuery(userSearchData.value).then(res => {
    useUserInfoStore().resetUserDataList(res.data);
})

// 创建标签
let route = useRoute();
createTag(route);

function addUserInfo() {
    title.value = "添加用户";
    userDataForm.value = {
        id: '',
        userAccount: '',
        userNickName: '',
        userPhone: '',
        userEmail: '',
        userPassword: '',
        qqNum: '',
        wechatNum: '',
        githubPath: '',
        giteePath: ''
    }
    useUserInfoStore().resetAddOrUpdateDialog(true);
}

function handleUpdate(index, row) {
    title.value = "修改用户";
    userDataForm.value = {
        id: row.id,
        userAccount: row.userAccount,
        userNickName: row.userNickName,
        userPhone: row.userPhone,
        userEmail: row.userEmail,
        userPassword: row.userPassword,
        qqNum: row.qqNum,
        wechatNum: row.wechatNum,
        githubPath: row.githubPath,
        giteePath: row.giteePath
    }
    useUserInfoStore().resetAddOrUpdateDialog(true);
}

function handleCopy(index, row) {
    title.value = "添加用户";
    userDataForm.value = {
        id: '',
        userAccount: row.userAccount,
        userNickName: row.userNickName,
        userPhone: row.userPhone,
        userEmail: row.userEmail,
        userPassword: '',
        qqNum: row.qqNum,
        wechatNum: row.wechatNum,
        githubPath: row.githubPath,
        giteePath: row.giteePath
    }
    useUserInfoStore().resetAddOrUpdateDialog(true);
}

function handleDelete(index, row) {
    userDataForm.value = {
        id: row.id,
        userAccount: row.userAccount,
        userNickName: row.userNickName,
        userPhone: row.userPhone,
        userEmail: row.userEmail,
        userPassword: '',
        qqNum: row.qqNum,
        wechatNum: row.wechatNum,
        githubPath: row.githubPath,
        giteePath: row.giteePath
    }
    useUserInfoStore().resetUserDeleteDialog(true);
}

function handleAuthorisation(index, row) {
    userRoleAuthorisation.value = row;
    useUserInfoStore().resetUserRoleAuthorisationDialog(true);
}

function changePage(index, size) {
    userSearchData.value["pageInfo"] = {
        pageIndex: index,
        pageSize: size
    };
    userInfoQuery(userSearchData.value).then(res => {
        useUserInfoStore().resetUserDataList(res.data);
    })
}
</script>

<style scoped lang="less">
.apiCacheContainer {
    width: 98%;
    height: 100%;
    margin: 0.2%;
    .searchContainer {
        width: 100%;
        margin-top: 1%;
    }
    .tableContainer {
        margin-left: 1%;
    }
    .insertContainer {
        margin-left: 1%;
        margin-top: 0.7%;
    }
    .refreshContainer {
        margin-top: 5%;
        //去除光标
        caret-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}
</style>